<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_数组的常用方法</title>
</head>
<body>
  <script>
    /* 
    1. 修改数组元素的方法(7个): push/pop/unshift/shift/splice/sort/reverse
    2. 带遍历回调的方法: forEach/filter/map/reduce/find/findIndex/some/every
    3. 其它: concat/slice/indexOf
    */

    // 1. 修改数组元素的方法(7个): push/pop/unshift/shift/splice/sort/reverse
    const arr = [3, 5, 2]
    arr.push(4) // [3, 5, 2, 4]
    arr.pop() // [3, 5, 2]
    arr.unshift(4) // [4, 3, 5, 2]
    arr.shift() // [3, 5, 2]
    arr.splice(1, 1, 1) // [3, 1, 2]
    arr.sort() // [1, 2, 3]
    arr.sort((item1, item2) => item2 - item1) // [3, 2, 1]
    arr.reverse() // [1, 2, 3]

    console.log(arr)

    const products = [
      {id: 1, name: 'A', price: 100},
      {id: 2, name: 'B', price: 85},
      {id: 3, name: 'C', price: 90},
      {id: 4, name: 'D', price: 75},
      {id: 5, name: 'E', price: 88}
    ]
    
    /* 
    需求:
    得到所有商品名与价格的数组, 且价格都翻倍 map
    得到所有价格大于88的所有商品
    找到一个价格小于90的商品
    得到所有价格大于88的所有商品的价格总和
    找到一个价格小于90的商品的下标
    判断是否所有商品价格都小于80
    判断是否有价格小于80的商品
    */
    // 2. 带遍历回调的方法(1 + 7个): forEach/filter/map/reduce/find/findIndex/some/every

    // 得到所有商品名与价格的数组, 且价格都翻倍 map
    console.log(products.map(item => {
      return {name: item.name, price: item.price*2}
    }))
    // 使用()将箭头与{}分隔开来
    console.log(products.map(item => ({name: item.name, price: item.price*2})))

    // 得到所有价格大于88的所有商品
    console.log(products.filter(item => item.price>88))

    // 找到一个价格小于90的商品
    console.log(products.find(item => item.price<90))

    // 得到所有价格大于88的所有商品的价格总和
    console.log(products.reduce((pre, item) => pre + item.price, 0))
    console.log(products.reduce((pre, item) => pre + (item.price>88 ? item.price : 0), 0))

    // 找到一个价格小于90的商品的下标
    console.log(products.findIndex(item => item.price<90))

    // 判断是否所有商品价格都小于80
    console.log(products.every(item => item.price<80))
    
    // 判断是否有价格小于80的商品
    console.log(products.some(item => item.price<80))

    // 3. 其它: concat/slice/indexOf
    const arr1 = [1, 3]
    // concat合并数组, 注意被合并的也可以不是数组, 如果不是, 被当作元素添加
    console.log(arr1.concat([5, 4], [6, 7], {}, () => {})) // [1, 3, 5, 4, 6, 7, {}, () => {}]
    // slice
    console.log([2, 3, 4, 5, 6].slice(1, 3)) // [3, 4]
    // indexOf
    console.log([2, 4, 6].indexOf(4)) // 1
    console.log([2, 4, 6].indexOf(-4)) // -1

  </script>
</body>
</html>